.maxBox {
//   width: 100vw;
//   height: 100vh;
  width: 1920px;
  height: 1080px;  
//   height: 1080px;
// background-color: #000000;
  .maxBox-top {
    width: 100%;
    height: 50%;
	display: flex;
	justify-content: space-between;
    .maxBox-top-left {
      width: 340px;
      height: 100%;
      background-color: rgba(45, 18, 18, 0.1); 
      .maxBox-top-left-top {
        margin-top: 10px;
		margin-bottom: 5px;
		box-sizing: border-box;
        width: 100%;
        display: flex;
        background-color: rgba(255, 255, 255, 0.2);
        .top-item {
          width: 110px;
          height: 50px;
          line-height: 50px;
          // background-color: #662e9e;
          border-radius: 5px;
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
          cursor: pointer;
        }
      }
	  .maxBox-top-left-bottom{
		width: 100%;
		height:calc(100% - 70px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 20px;
		.bottom-item{
			width: 100%;
			height:112px;
			background-color: rgba(68, 68, 68, 0.8);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:10px;
			box-sizing: border-box;
			.bottom-item-left{
				width: 130px;
				color: #ffffff;
				font-size: 18px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 10px;
				img{
					width: 50px;
				}
			}
			.bottom-item-right{
				color: #ffffff;
				text-align: right;
				font-size: 20px;
				.name{
					font-size: 24px;
					font-weight: bold;
				}
			}
		}
	  }
    }
    .maxBox-top-right {
		// width: 450px;
		width: 1246px;
		height: 100%;
		// background-image: url("../../assets/can_kao.png");
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		.maxBox-top-right-left{
			width: 47%;
			height: 100%;
			.topBox{
				width: 100%;
				// background-color: rgba(255, 255, 255, 0.4);
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.topBox-item{
					width: 144px;
					height: 80px;
					padding-left: 20px;
					padding-top: 20px;
					box-sizing: border-box;
					font-size: 16px;
					background-color: rgba(255, 255, 255, 0.4);
					color: rgba(255, 255, 255, 0.7);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					.topBox-title{
						width: 100%;
						height: 30px;
						line-height: 35px;
						text-align: left;
					}
					.topBox-bottom{
						width: 100%;
						height: 30px;
						text-align: left;
						font-size: 12px;
					}
				}
			}
			.bomBox{
				margin-top: 30px;
				color: #ffffff;
				// background-color: aliceblue;
				width: 100%;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-left: 200px;
				box-sizing: border-box;
				letter-spacing: 1px;
				.parallelogram {
					width: 170px;
					height: 60px;
					background-color: #a46118;
					border: 2px solid #ffffff;
					// transform: skew(-20deg);
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 10px;
					font-style: normal;
					// margin: 50px;
					&:nth-child(2){
						background-color: #31396a;
					}
				}
		
				/* 第一个边框 */
				.parallelogram::before {
					content: '';
					position: absolute;
					top: -5px;
					left: -5px;
					width: 100%;
					height: 100%;
					transform: skew(0deg);
					border: 2px solid #ffffff;
					z-index: -1;
				}
		
				/* 第二个边框 */
				.parallelogram::after {
					content: '';
					position: absolute;
					top: -10px;
					left: -10px;
					width: 100%;
					height: 100%;
					// border: 3px solid #e74c3c;
					transform: skew(20deg);
					z-index: -2;
				}
			}
		}
		.maxBox-top-right-right{
			// width: 44%;
			width: 545px;
			.right-top{
				width: 100%;
				height: 70%;
				background-color: rgba(68,68,68,0.8);
				// background-color: #3498db;
				.right-top-top{
					display: flex;
					justify-content: space-between;
					.switch{
						padding: 0 20px;
						box-sizing: border-box;
						height: 100px;
						margin-top: 36px;
					}
					.red-box{
						color: #ffffff;
						font-size: 20px;
						padding: 5px;
						box-sizing: border-box;
						.red-box-1{
							border: 3px solid #ffffff;
							background-color: #bb1d21;
							width: 180px;
						}
					}
				}
				.right-top-bom{
					width: 100%;
					height: 230px;
				}
			}
			.right-bom{
				margin-top: 5px;
				width: 100%;
				height: 29.9%;
				display: flex;
				justify-content: space-between;
				.right-bom-left{
					background-color: rgba(68,68,68,0.8);
					width: 49.6%;
					height: 100%;
					display: flex;
					.right-bom-left-left{
						width: 50%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.left-icon{
							width: 105px;
							height: 104px;
							background-image: url("@/assets/danxiantu_su_cai/dianxian.png");
        					background-size: 100% 100%;
						}
						.right-icon{
							width: 105px;
							height: 104px;
							background-image: url("@/assets/danxiantu_su_cai/dianji.png");
        					background-size: 100% 100%;
						}
						.left-text{
							color: #ffffff;
							font-size: 16px;
						}
					}
					.right-bom-left-right{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 10px 0;
						box-sizing: border-box;
						width: 125px;
						.right-text{
							text-align: right;
							color: #ffffff;
							font-size: 14px;
							.right-text-3{
								font-weight: bold;
							}
						}
					}
				}
				.right-bom-right{
					background-color: rgba(68,68,68,0.8);
					width: 49.6%;
					height: 100%;
				}
			}
		}
    }  
  }
  .maxBox-bottom {
    width: 100%;
    height: 50%;
	display: flex;
	justify-content: space-between;
    .maxBox-bottom-left {
		width: 545px;
		height: 100%;
    }
    .maxBox-bottom-right {
		width: 324px;
		height: 100%;
		.maxBox-top-left {
			width: 100%;
			height: 100%;
			background-color: rgba(45, 18, 18, 0.1); 
			.maxBox-top-left-top {
			  margin-top: 10px;
			  margin-bottom: 5px;
			  box-sizing: border-box;
			  width: 100%;
			  display: flex;
			  background-color: rgba(255, 255, 255, 0.2);
			  .top-item {
				width: 110px;
				height: 50px;
				line-height: 50px;
				// background-color: #662e9e;
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				color: #ffffff;
				cursor: pointer;
			  }
			}
			.maxBox-top-left-bottom{
			  width: 100%;
			  height:calc(100% - 70px);
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  background-color: rgba(68, 68, 68, 0.5);
			  
			  .shItem{
				width: 100%;
				height: 67px;
				background-color: rgba(68, 68, 68, 0.8);
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15px;
				box-sizing: border-box;
				.shItem-left{
					letter-spacing: 2px;
				}
				.shItem-right{
					width: 200px;
					display: flex;
					justify-content: space-between;
					.shItem-right-1{
						width: 94px;
						height: 50px;
						background-color: #67a625;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						box-shadow: inset 0 0 10px #000000, 
									inset 0 0 10px #52524a, 
									inset 0 0 10px #215329, 
									inset 0 0 10px #485b22, 
									inset 0 0 10px #0a272e;
						&:nth-child(2){
							background-color: #b3181e;
						}
						.shItem-right-1-text{
							font-size: 14px;
							letter-spacing: 2px;
						}
						.shItem-right-1-box{
							font-size: 12px;
						}
					}
				}
			  }
			}
		  }
    }
  }
}

:deep(.is-text){
	font-size: 8px !important;
}

.activeLeftTop {
  background-color: rgba(255, 255, 255, 0.6);
}

.activeLeftRight{
	background-color: rgba(255, 255, 255, 0.2) !important;
	color: rgba(255, 255, 255, 1) !important;
}

.ue-text{
	font-size: 20px;
	color: red !important;
}




.maxBox-top-right-right{
	width: 100%;
	.right-top{
		width: 100%;
		height: 70%;
		background-color: rgba(68,68,68,0.8);
		// background-color: #3498db;
		.right-top-top{
			display: flex;
			justify-content: space-between;
			.switch{
				padding: 0 20px;
				box-sizing: border-box;
				height: 100px;
				margin-top: 36px;
			}
			.red-box{
				color: #ffffff;
				font-size: 20px;
				padding: 5px;
				box-sizing: border-box;
				.red-box-1{
					border: 3px solid #ffffff;
					background-color: #bb1d21;
					width: 180px;
				}
			}
		}
		.right-top-bom{
			width: 100%;
			// height: 230px;
			height: 178px;
		}
	}
	.right-bom{
		margin-top: 5px;
		width: 100%;
		height: 29.9%;
		display: flex;
		justify-content: space-between;
		.right-bom-left{
			background-color: rgba(68,68,68,0.8);
			width: 49.6%;
			height: 100%;
			display: flex;
			.right-bom-left-left{
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.left-icon{
					width: 105px;
					height: 104px;
					background-image: url("@/assets/danxiantu_su_cai/dianxian.png");
					background-size: 100% 100%;
				}
				.right-icon{
					width: 105px;
					height: 104px;
					background-image: url("@/assets/danxiantu_su_cai/dianji.png");
					background-size: 100% 100%;
				}
				.left-text{
					color: #ffffff;
					font-size: 16px;
				}
			}
			.right-bom-left-right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 10px 0;
				box-sizing: border-box;
				width: 125px;
				.right-text{
					text-align: right;
					color: #ffffff;
					font-size: 14px;
					.right-text-3{
						font-weight: bold;
					}
				}
			}
		}
		.right-bom-right{
			background-color: rgba(68,68,68,0.8);
			width: 49.6%;
			height: 100%;
		}
	}
}
.youmin1{
	opacity: 1;
}
.youmin05{
	opacity: 0.5;
}
.youmin02{
	opacity: 0.4;
}